<template>
	<view class="bottom-btn flex flex-align-items " style="width: 100%;" >
		<view class="padding-x-25 btn flex flex-align-items" v-for="(item,index) in list" :key="index">
			<view >
				
				<view class="btn-title flex  justify-content" :class="'iconfont '+item.icon" ></view>
				<view class="btn-title flex  justify-content" >{{item.title}}</view>
			</view>
		</view>
		
		
		<view class="padding-x-25 btn flex flex-align-items" @tap="tocat">
			<view style="position: relative;">
				<view class="main-bg-color" v-if="cartListSize>0"
				style="position: absolute; top: -16rpx; right: 0; color: #FFFFFF; width: 35rpx; height: 35rpx; border-radius: 100%;
				font-size: 20rpx; display: flex; align-items: center;justify-content: center;">
					{{cartListSize}}
				</view>
				<view class="btn-title flex  justify-content iconfont icon-gouwuche1"  ></view>
				<view class="btn-title flex  justify-content" >购物车</view>
			</view>
		</view>
		
		<view class="flex flex-grow-1" style="margin-right: 20rpx;">
			<view class="btn flex-grow-1 flex flex-align-items justify-content gouwuche" @tap="popuPopuAttrPrice(1)">加入购物车</view>
			<view class="btn flex-grow-1 flex flex-align-items justify-content zhifu" @tap="popuPopuAttrPrice(2)">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default{
		data(){
			return {
				
				list:[
					{
						"title":"客服",
						"icon":"icon-xiaoxi"
					},
					
					{
						"title":"收藏",
						"icon":"icon-shoucang"
					}
				]
			}
		},
		computed:{
			...mapState({
				cartListSize:state=>state.cart2.cartList.reduce((size,item)=>size+item.payNum,0)
			})
		},
		methods:{
			popuPopuAttrPrice(type){
				this.$emit("popuPopuAttrPrice",type);
			},
			tocat(){
				console.log("-----------------")
				uni.switchTab({
					url:"../../pages/cart2/cart2"
				})
			}
		}
	}
</script>

<style lang="less">
	.bottom-btn{
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120rpx;
		background-color: #FFFFFF;
	}
	.btn{
		line-height: 1.5;
		height: 80rpx;
		
	}
	.gouwuche{
		background-color: black;
		color: #FFFFFF;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}
	.zhifu{
		color: #FFFFFF;
		background-color: #FD6801;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}
	.btn-title{
		line-height: 1.5;
	}
</style>
